<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>JavaScirpt访问DOM数案例</h3>
    <h5></h5>
    <h5>tag、className、name、id</h5>

    
    <a href="http://www.taobao.com" target="_blank">淘宝</a>
    <a class="jd" href="http://www.jd.com" target="_blank">京东</a>
    <a name="pdd" href="http://www.pinduoduo.com" target="_blank">拼多多</a>
    <a id="pxx" href="http://www.pinduoduo.com" target="_blank">拼夕夕</a>
 <!--页面上使用javascript，通过script标签来实现
  "text/javascript"新标准可以省略，默认
  src=""引入外部js jquery.js
 -->
 <script >
 window.alert('使用js获取页面元素内容');

/*获取页面a标签,按tagName方式返回是一个数组
第一个元素:arr[0] 下标从0开始
谷歌浏览器提供console方式,用f12查看
*/
//第一种方式:tagname方式
console.log(document.getElementsByTagName("a")[0].innerText);//a标签内容
console.log(document.getElementsByTagName("a")[0].href);//a标签属性

//第二种方式:classname方式
console.log(document.getElementsByClassName("jd")[0].innerText);
console.log(document.getElementsByClassName("jd")[0].href);

//第三种方式：name方式
console.log(document.getElementsByName("pdd")[0].innerText);
console.log(document.getElementsByName("pdd")[0].href);

//第四种方式：id方式 而这种方式获取就是一个值 无需数组方式
console.log(document.getElementById("pxx").innerText);
console.log(document.getElementById("pxx").href);

//能否修改页面值，html做不了写死的，css也做不了美化，js可以
var a=document.getElementsByTagName("a")[0];
a.innerText="百度";
a.href="http://www.baidu.com";

</script>
</body>
</html>